<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: [1, 2],
                click: function(a) {
                    a.push(new Date - 0)
                    // model.array.push(new Date - 0)
                }
            })
            model.array.$watch("length", function( a, b) {
                console.log(a, b)
            })

        </script>
        <style>
            .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
    </head>
    <!-- 对于数组，我们只能监听数组长度的变化，不能监听其内部是否发生变化。 -->
    <body ms-controller="test" class='ms-hover'>
        <div ms-click="click(array)">
            <div ms-repeat='array'>{{el}}</div>
        </div>
    </body>
</html>